{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">用户画像分析</h1>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">总用户数</h5>
                    <div class="d-flex align-items-center">
                        <div class="display-4 me-3" id="total-users">0</div>
                        <i class="mdi mdi-account-multiple text-primary" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">活跃用户</h5>
                    <div class="d-flex align-items-center">
                        <div class="display-4 me-3" id="active-users">0</div>
                        <i class="mdi mdi-account-check text-success" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">VIP用户</h5>
                    <div class="d-flex align-items-center">
                        <div class="display-4 me-3" id="vip-users">0</div>
                        <i class="mdi mdi-crown text-warning" style="font-size: 2.5rem;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="row">
        <!-- 左侧标签栏 -->
        <div class="col-md-3">
            <div class="card">
                <div class="card-body p-0">
                    <div class="tag-sidebar">
                        <div class="tag-list">
                            <div class="tag-category">
                                <h6 class="mb-2">用户价值</h6>
                                <button class="tag-btn active" data-tag="">全部用户</button>
                                <button class="tag-btn" data-tag="高价值客户">高价值客户</button>
                                <button class="tag-btn" data-tag="VIP会员">VIP会员</button>
                            </div>
                            <div class="tag-category">
                                <h6 class="mb-2">活跃度</h6>
                                <button class="tag-btn" data-tag="活跃客户">活跃客户</button>
                                <button class="tag-btn" data-tag="潜在客户">潜在客户</button>
                                <button class="tag-btn" data-tag="流失客户">流失客户</button>
                            </div>
                            <div class="tag-category">
                                <h6 class="mb-2">客户类型</h6>
                                <button class="tag-btn" data-tag="新注册用户">新注册用户</button>
                                <button class="tag-btn" data-tag="常住客户">常住客户</button>
                                <button class="tag-btn" data-tag="商务客户">商务客户</button>
                                <button class="tag-btn" data-tag="休闲客户">休闲客户</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧图表区域 -->
        <div class="col-md-9">
            <div class="row">
                <!-- 消费得分分布图表 -->
                <div class="col-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="mb-4">用户消费得分分布</h5>
                            <div class="d-flex justify-content-between mb-3">
                                <div>
                                    <span class="text-muted">平均消费得分：</span>
                                    <span id="averageScore" class="h4">0</span>
                                </div>
                                <div>
                                    <span class="text-muted">用户数量：</span>
                                    <span id="userCount" class="h4">0</span>
                                </div>
                            </div>
                            <div class="chart-container">
                                <canvas id="consumptionScoreChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 购物偏好饼图 -->
            </div>
        </div>
    </div>
</div>

<style>
.tag-sidebar {
    height: 100%;
    min-height: 500px;
    overflow-y: auto;
    background: #f8f9fa;
}

.tag-list {
    padding: 1rem;
}

.tag-category {
    margin-bottom: 1.5rem;
}

.tag-category h6 {
    color: #000000 !important;
    font-weight: 600;
    padding-left: 0.5rem;
}

.tag-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.5rem 1rem;
    margin-bottom: 0.5rem;
    border: none;
    background: none;
    border-radius: 4px;
    color: #495057;
    transition: all 0.2s;
}

.tag-btn:hover {
    background: #e9ecef;
    color: #000;
}

.tag-btn.active {
    background: #F5F9FF;
    color: #000000;
}

.chart-container {
    position: relative;
    height: 400px;
    width: 100%;
}

.pie-chart-container {
    position: relative;
    height: 400px;
    width: 100%;
}

/* 自定义滚动条样式 */
.tag-sidebar::-webkit-scrollbar {
    width: 6px;
}

.tag-sidebar::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.tag-sidebar::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.tag-sidebar::-webkit-scrollbar-thumb:hover {
    background: #555;
}
</style>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="{{ url_for('static', filename='js/consumption_distribution.js') }}"></script>
<script src="{{ url_for('static', filename='js/shopping_preferences.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 加载用户统计数据
    fetch('/api/user-stats')
        .then(response => response.json())
        .then(data => {
            document.getElementById('total-users').textContent = data.total_users;
            document.getElementById('active-users').textContent = data.active_users;
            document.getElementById('vip-users').textContent = data.vip_users;
        })
        .catch(error => {
            console.error('Error loading user stats:', error);
        });
});
</script>
{% endblock %}
